<template>
  <div class="safety">
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt>
      <span>发布求购广告</span>
    </div>
    <div class="m-label">标题</div>
    <div class="m-input-box">
      <input class="m-input" type="text" autocomplete="off" name="userName" value placeholder="请输入您的出售标题" v-model="title">
    </div>
    <div class="m-label">单价</div>
    <div class="m-input-box">
      <input class="m-input" type="text" autocomplete="off" name="userName" value placeholder="请输入买单单价" v-model="price">
    </div>
    <div class="m-label">最小限额</div>
    <div class="m-input-box">
      <input class="m-input" type="text" autocomplete="off" name="userName" value placeholder="请输入最小买单限额" v-model="b_num">
    </div>
     <div class="m-label">最大限额</div>
    <div class="m-input-box">
      <input class="m-input" type="text" autocomplete="off" name="userName" value placeholder="请输入最大买单限额" v-model="b_num1">
    </div>
    <div class="m-label">验证码</div>
    <div class="m-input-box">
      <input class="m-input" placeholder="请输入验证码" type="text" autocomplete="off" name="userName" value v-model="code">
      <span v-html="djs" @click="sendcode()">获取验证码</span>
    </div>
    <div class="m-label">交易密码</div>
    <div class="m-input-box">
      <input class="m-input" type="password" autocomplete="new-password" name="password" value placeholder="请输入交易密码" v-model="trad_pass">
    </div>
    <div class="m-label">支付方式</div>
    <div class="m-input-box" style="margin-right:.4rem" @click="show3">
      <div class="qh">
        <img src="../../assets/weilogo.png" alt>
        <input class="m-input" type="text" value="微信" readonly>
      </div>
      <img v-if="wx==3" class="r_qh" src="../../assets/dg.png" alt>
      <img v-else class="r_qh" src="../../assets/wdg.png" alt>
    </div>
    <div class="m-input-box" style="margin-right:.4rem" @click="show1">
      <div class="qh">
        <img src="../../assets/zfb.png" alt>
        <input class="m-input" type="text" value="支付宝" readonly>
      </div>
      <img v-if="apply==2" class="r_qh" src="../../assets/dg.png" alt>
      <img v-else class="r_qh" src="../../assets/wdg.png" alt>
    </div>
    <div class="m-input-box" style="margin-right:.4rem" @click="show2">
      <div class="qh">
        <img src="../../assets/yl.png" alt>
        <input class="m-input" type="text" value="银联支付" readonly>
      </div>
      <img v-if="blan==1" class="r_qh" src="../../assets/dg.png" alt>
      <img v-else class="r_qh" src="../../assets/wdg.png" alt>
    </div>
    <div class="red_btn" @click="push">提交</div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="5"/>
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";
import { setInterval, clearInterval, setTimeout } from "timers";

export default {
  name: "Gbuy",
  components: {
    Tabbar
  },
  data() {
    return {
      title: "",
      price: "",
      b_num: "",
      b_num1:"",
      code: "",
      trad_pass: "",
      isShow: 3,
      djs: "获取验证码",
      wx:3,
      apply:"",
      blan:""
    };
  },
  created: function() {},
  mounted() {},
  methods: {
    //   isShow第一个,!isShow第二个
    show1() {
      this.isShow = 2;
      this.apply?this.apply="":this.apply=2;      
    },
    show2() {
      this.isShow = 1;
      this.blan?this.blan="":this.blan=1;
    },
    show3() {
      this.isShow = 3;
      this.wx?this.wx="":this.wx=3;
    },
    sendcode() {
      if (this.djs.indexOf("s") != -1) return;
      this.$axios.post("/index/otcexchange/sendcode", {}).then(res => {
        res.data.msg?this.$createToast({ txt: res.data.msg, type: "txt" }).show():"";
        if (res.data.code == 0) {
          this.djs = "60s";
          var ts = this;
          var time = setInterval(function() {
            var num1 = parseInt(ts.djs);
            if (num1 <= 1) {
              ts.djs = "重新发送";
              clearInterval(time);
            } else {
              ts.djs = --num1 + "s";
            }
          }, 1000);
        }
      });
    },
    push() {
      if (
        this.title &&this.b_num &&this.price &&this.code &&this.trad_pass &&this.isShow
      ) {
        var obj=[];
         this.wx?obj.push(this.wx):"";
        this.apply?obj.push(this.apply):"";
        this.blan?obj.push(this.blan):"";
        obj.length>1?
        obj=obj.join(","):obj=obj[0];
        this.$axios
          .post("/index/otcexchange/buy", {
            type: "1",
            title: this.title,
            mincny: this.b_num,
            maxcny: this.b_num1,
            price: this.price,
            account_id:String(this.isShow),
            paytype:String(obj),
            code: this.code,
            trad_password: this.trad_pass,
            fiel_type: "1"
          })
          .then(res => {
            console.log(res);
            this.$createToast({
              txt: res.data.msg,
              type: "txt",
              time: 1000
            }).show();
            setTimeout(() => {
              if (res.data.code == 0) {
                sessionStorage.setItem("issuebuy",1)
                this.$router.back(-1);
              }
            }, 1000);
          });
      }else{
           this.$createToast({ txt: "请填写完整", type: "txt", time: 1000 }).show();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.red_btn {
  width: 92%;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.safety {
  .m-label {
    padding-left: 4%;
  }
  .m-input-box {
    padding-right: 0;
    margin-left: 4%;
    justify-content: space-between;
    span {
      width: 35%;
      color: #e56337;
      font-size: 0.373333rem;
      margin-top: 0.58rem;
      margin-right: 4%;
    }
    .qh {
      .f-flex();
      img {
        width: 0.48rem;
        height: 0.48rem;
        margin-top: 0.5rem;
        margin-right: 0.32rem;
      }
    }
    .r_qh {
      width: 0.373333rem;
      height: 0.373333rem;
    }
  }
  .m-input {
    color: #000;
    font-size: 0.426667rem;
    font-weight: bold;
  }
  .xga {
    padding-right: 4%;
    width: 30%;
    .f-flex();
    margin-top: 0.8rem;
    font-size: 0.373333rem;
    span {
      padding-right: 0.2rem;
      color: #aab2ca;
    }
    img {
      margin-top: 0;
    }
  }
}
</style>

